<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EX-admin 数据编辑页面</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">

</head>

<body>
<div class="x-body" id="app">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>
                登录名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" v-model="username" required="" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>
                手机
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" v-model="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
                可用于登录系统
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                <span class="x-red">*</span>
                邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" v-model="email" required="" lay-verify="email" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>
                角色</label>
            <div class="layui-input-block">
                <input type="checkbox" name="role[0]" value="admin" lay-skin="primary" title="超级管理员" v-model="role">
                <input type="checkbox" name="role[1]" value="editor" lay-skin="primary" title="编辑人员" v-model="role">
                <input type="checkbox" name="role[2]" value="operator" lay-skin="primary" title="运营人员" v-model="role">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" id="L_pass" name="pass" lay-verify="pass" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                6-12位, 不改请留空
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" lay-verify="repass" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">
                <!-- placeholder -->
            </label>
            <button class="layui-btn" lay-filter="update" lay-submit="">保存</button>
        </div>
    </form>
</div>

<script type="text/javascript" src="./lib/jquery.min.js "></script>
<script type="text/javascript" src="./lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./lib/vue/vue.js"></script>
<script type="text/javascript" src="./lib/vue/axios.min.js"></script>

<script>
	var app = new Vue({

		el: "#app",
		data: {
			username: "",
			phone: "",
			email: "",
			role: []
		},

		methods: {}
	});

	//获取后端数据
	httpGet("./data/data-edit.json", function (result) {

		//更新数据模型
		mergeObject(app.$data, result.data);
	})

	layui.use([
		'form', 'layer'
	], function () {
		$ = layui.jquery;
		var form = layui.form,
			layer = layui.layer;

		//自定义验证规则
		form.verify({
			nikename: function (value) {
				if (value.length < 5) {
					return '昵称至少得5个字符啊';
				}
			},
			pass: function (value) {

				var reg = /(.+){6,12}$/;
				if (value != "" && !reg.test(value)) {
					return '密码必须是6-12位的字符串';
				}
			},
			repass: function (value) {
				if ($('#L_pass').val() != $('#L_repass').val()) {
					return '两次密码不一致';
				}
			}
		});

		//监听提交
		form.on('submit(update)', function (data) {

			console.log(data);
			//发异步，把数据提交给后端
			layer.alert("数据更新成功", {
				icon: 6
			}, function () {
				//关闭弹出层
				x_admin_close("render");
			});
			return false;
		});

	});
</script>

</body>

</html>